<template>
  <div class="qualiy_list">
    <div class="monitor-tree">
      <h3 class="tree-title">选择项目</h3>
      <el-tree
        :data="tunnelInfoChild"
        @check-change="treeCheckClick"
        :default-expanded-keys="keysListNodeData"
        :check-on-click-node="true"
        node-key="pid"
        ref="tree"
        default-expand-all
      ></el-tree>
    </div>

    <div class="monitor-list">
      <TunnelHeaderVue />
      <el-table
        :data="tunnelInfo"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}"
      >
        <el-table-column width="50" prop="id" label="序号"></el-table-column>
        <el-table-column width="100" prop="tunType" label="隧道类型"></el-table-column>
        <el-table-column show-overflow-tooltip prop="tunName" label="隧道名称"></el-table-column>
        <el-table-column show-overflow-tooltip prop="tunConstructunit" label="施工单位"></el-table-column>
        <el-table-column show-overflow-tooltip prop="tunDevelopunit" label="建设单位"></el-table-column>
        <el-table-column show-overflow-tooltip prop="tunDesignunit" label="设计单位"></el-table-column>
        <el-table-column show-overflow-tooltip prop="tunSupervisionunit" label="监理单位"></el-table-column>
        <el-table-column
          :formatter="formatDate"
          show-overflow-tooltip
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <el-table-column label="隧道状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="warning">施工中</el-tag>
            <el-tag v-if="scope.row.status == 2" type="success">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="200" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="currentPage.total"
      ></el-pagination>
    </div>
    <TunnelEditorVue :flag="flag" />
  </div>
</template>

<script>
import api from "../../../api";
import qs from "qs";
import { mapState } from "vuex";
import TunnelEditorVue from "./TunnelEditor.vue";
import TunnelHeaderVue from "./TunnelHeader.vue";

export default {
  data() {
    return {
      keysListNodeData:[],
      pId: "", // 项目id
      tunnelInfoChild: [],
      tunnelInfo: [],
      flag: false,
      value: "--全部--",
      currentPage: {
        pageNo: 1,
        total: 0,
      },
    };
  },
  computed: {
    ...mapState("tunnelInfoModule", ["page", "search"]),
    searchChange() {
      return this.search;
    },
  },
  components: {
    TunnelEditorVue,
    TunnelHeaderVue,
  },
  mounted() {
    this.getchildren();
    // 刷新操作
    this.$bus.$on("onRefreshTunnelInfo", (flag) => {
      this.http(1, flag);
    });
  },
  methods: {
    //获取数结构
    getchildren() {
      api.proAdminfindByChild().then((res) => {
        if (res.data.code == 2001) {
          this.tunnelInfoChild = res.data.data
          const arrDat = res.data.data[0].pid
            this.keysListNodeData.push(arrDat)
        }
      });
    },
    http(page, pid) {
      api.tunnelInfoPageFindByAll({ page, pid }).then((res) => {
        if (res.data.code == 2001) {
          this.tunnelInfo = res.data.data.records;
          this.currentPage.total = parseInt(res.data.data.total);
        }
      });
    },
    handleEdit(index, row) {
      this.$bus.$emit("onShowEditor", row);
    },
    handleDelete(index, row) {
      let data = {
        id: row.id,
      };
      this.$confirm("此操作将永久删除隧道信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "del-model",
        type: "warning",
      })
        .then(() => {
          api.tunnelInfodeleteById(qs.stringify(data)).then((res) => {
            if (res.data.code == 2001) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.http(1, this.pId);
            } else {
              this.$message({
                type: "fail",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(val) {
      this.http(val, this.pId);
    },
    treeCheckClick(data, checked, node) {
      if (data.id != undefined) {
        this.pId = data.id;
        this.http(1, this.pId);
        this.$bus.$emit("onAddTunnelInfoproid", this.pId);
      }
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
  },
};
</script>

<style scoped>
.tree-title {
  text-align: left;
  font-size: 16px;
  color: #606266;
  padding: 10px;
  padding-bottom: 20px;
}

.monitor-tree {
  width: 220px;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  background-color: #fff;
  padding: 10px;
}

.monitor-list {
  margin-left: 10px;
  flex: 1;
  width: calc(100% - 220px);
}
</style>